<template>
  <div class="home-nav-wrap">
    <!-- 在首页展示段子全部分类 -->
    <van-tabs animated swipeable line-height="0" title-active-color="#f58c1d" @click="cateChange">
      <van-tab v-for="(item,index) in tabData" :title="item.tabName" :key="index"></van-tab>
    </van-tabs>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Emit } from "vue-property-decorator";
import { Tab, Tabs } from "vant";

@Component({
  components: {
    [Tab.name]: Tab, // tab切换组件
    [Tabs.name]: Tabs
  }
})
export default class HomeNav extends Vue {
  // tab数据
  private tabData: object[] = [
    {
      id: 1,
      pageNum: 1, // 当期那分页
      tabName: "推荐" // （全部）
    },
    {
      id: 2,
      pageNum: 1,
      tabName: "文字"
    },
    {
      id: 3,
      pageNum: 1,
      tabName: "图片"
    },
    {
      id: 4,
      pageNum: 1,
      tabName: "视频"
    }
  ];

  // tab分类切换
  @Emit("cateChange")
  cateChange(name: number) {
    return name + 1;
  }
}
</script>
<style lang="scss">
.home-nav-wrap{
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}
</style>


